<template>
  <div class="class-statistic">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-date-picker
            v-model="listQuery.date"
            :picker-options="picker"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="|"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleFilter"
          />
          <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="来源分析" name="1">
        <income/>
      </el-tab-pane>
      <el-tab-pane label="购买转化分析" name="2">
        <shopping/>
      </el-tab-pane>
      <el-tab-pane label="观看统计" name="3">
        <Classview/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Income from './components/income'
import Shopping from './components/shopping'
import Classview from './components/view'
// import { getRewardRecord } from '@/api/operate/invitation.js' // 数据接口
export default {
  components: {
    Income,
    Shopping,
    Classview
  },
  data() {
    return {
      listQuery: {
        date: ''
      },
      activeName: '3',
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      options1: [
        {
          label: '课程分类',
          value: ''
        },
        {
          value: '会计中级',
          label: '会计中级'
        },
        {
          value: '会计初级',
          label: '会计初级'
        },
        {
          value: '注册会计师',
          label: '注册会计师'
        }
      ],
      options3: [
        {
          label: '类型',
          value: ''
        },
        {
          value: '直播公开课',
          label: '直播公开课'
        },
        {
          value: '录播公开课',
          label: '录播公开课'
        }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
    },
    handleFilter() {
    },
    clearParams() {
      this.listQuery.date = ''
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.class-statistic {
  margin-top: 0px;
  padding: 0;
  .search-content {
    width: 100%;
    margin-bottom: 21px;
  }
}
</style>
